<template>
  <div class="infoPanel" :style="{borderRadius: borderPx?borderPx+'px': ''}">
    <div class="panelHeader" :class="infoUnfold?'border':''" @click="showUnfoldButton?infoUnfold = !infoUnfold:''">
      <div class="panelTitle">
        <zy-title :class="{panelTitleContent:titleFlex}" v-if="title">
          <el-checkbox class="bold" v-if="headType=='checkbox'" v-model="checked" @change="handleCheckChange">{{title}}
          </el-checkbox>
          <div v-else>{{title}}</div>
        </zy-title>
        <slot name="title"></slot>
      </div>
      <div class="btnArea" v-if="showUnfoldButton">
        <i class="btn el-icon-caret-bottom" :class="infoUnfold?'reverse':''"></i>
      </div>
    </div>
    <div class="panelContent" v-show="infoUnfold">
      <slot></slot>
    </div>
  </div>
</template>

<script>
	export default {
		name: "zyInfoPanel",
		props: {
			title: {
				type: String,
				default: () => ""
			},
			isUnfold: {
				type: Boolean,
				default: () => true
			},
			showUnfoldButton: {
				type: Boolean,
				default: () => true
			},
			titleFlex: {
				type: Boolean,
				default: () => true
			},
			value: {
				type: Boolean,
				default: () => false
			},
			headType: {
				type: String,
				default: () => 'title'
			},
      borderPx:{
				type: [String, Number],
        default: ()=>''
      }
		},
		data() {
			return {
				checked:false,
				infoUnfold: this.isUnfold
			};
		},
		computed: {},
		watch: {
			value(val) {
				console.log(val)
				this.checked = val;
			}
    },
		components: {},
		methods: {
			handleCheckChange(val) {
				console.log(val)
				this.$emit('input', this.checked)
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/common";

  .infoPanel {
    border-radius: @commonBorderRadius;
    background: @allWhite;

    .panelHeader {
      display: flex;
      align-items: center;
      cursor: pointer;
      width: 100%;

      &.border {
        border-bottom: 1px solid @borderColor;
      }

      .panelTitle {
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 12px;

        .panelTitleContent {
          flex: 1;
        }

        .bold {
          font-weight: bold;

          /deep/ .el-checkbox__label {
            font-size: 16px;
          }
        }
      }

      .btnArea {
        flex: 0 0 80px;
        font-size: 32px;

        .btn {
          cursor: pointer;
          transition: transform .3s;
          transform: rotateZ(0);

          &.reverse {
            transform: rotateZ(180deg);
          }
        }
      }
    }

    .panelContent {
      width: 100%;
      border: 1px solid transparent;
    }
  }
</style>
